/**
 *
 * chentao 2018.1.24
 * @flow
 */
import React, { PureComponent } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    TouchableOpacity,
    ScrollView,
    Modal,
    TextInput,
    TouchableWithoutFeedback,
    Keyboard,
} from 'react-native';
import { StyleModule,Screen } from '../common';
const vH = 46;
const vW = Screen.width;
class InputPasswordCommonDialog extends PureComponent {
    timers = [];
    constructor(props){
        super(props);
        this.state = {
            modalVisible:false,
            txtInp:'',//输入内容
            keyboardHeight:0,
        };
    }
    componentWillMount () {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
    }
    componentDidMount() {
        //do something req...
    }
    componentWillUnmount(){
        //do something about clear...
        for(let i = 0;i < this.timers.length;i++){
            console.log('clearTimeout id:' + this.timers[i]);
            clearTimeout(this.timers[i]);
        }
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }
    _keyboardDidShow =(e)=> {
        if(e && e.startCoordinates && e.startCoordinates.height){
            this.setState({keyboardHeight:e.startCoordinates.height});
        }
    };

    _keyboardDidHide=(e)=> {
        this.setState({keyboardHeight:0});
    };
    hide(){
        this.setState({ modalVisible:false });
    }
    show(){
        this.setState({ modalVisible:true });
    }

    render(){
        let isOk = this.state.txtInp.length;
        return (
            <Modal
                animationType={'slide'}
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={()=>{
                    this.hide();
                }}
            >
                <TouchableWithoutFeedback onPress={()=>{ this.hide() }}>
                    <View style={styles.container}>
                        <View style={[styles.innerContainer,{marginBottom:this.state.keyboardHeight}]}>
                            <View style={{width:vW,height:vH,backgroundColor:'#eee',flexDirection:'row',alignItems:'center',justifyContent:'space-around',borderRadius:1}}>
                                <View style={{width:vW * 0.8,height:vH * 0.8,backgroundColor:'#fff',borderRadius:4}}>
                                    <TextInput
                                        style={{marginLeft:4,width:vW * 0.8,height:vH * 0.8,fontSize:16,color:'#999999',paddingVertical:0}}
                                        autoFocus={true}
                                        selectTextOnFocus={true}
                                        underlineColorAndroid="transparent"
                                        // placeholder={'请输入密码'}
                                        value={this.state.txtInp}
                                        onChangeText={(txt)=>{
                                            console.log(txt);
                                            this.setState({ txtInp:txt });
                                        }}
                                    />
                                </View>
                                <View style={{width:vW * 0.15,height:50,flexDirection:'row',alignItems:'center',}}>
                                    <TouchableOpacity
                                        onPress={()=>{
                                            if(isOk){
                                                this.props.callBack(this.state.txtInp);
                                                this.hide();
                                            } else {
                                                this.hide();
                                            }
                                        }}
                                        style={{width:vW * 0.15,height:vH * 0.8,alignItems:'center',justifyContent:'center',backgroundColor:'#0092db',borderRadius:4}}
                                    >
                                        <Text style={{fontSize:16,color:'#fff'}}>{ isOk > 0 ? '确定' : '取消'}</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </Modal>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems:'center',
        // backgroundColor:'rgba(0, 0, 0, 0.5)',
    },
    innerContainer: {
        marginTop:50,
        width:vW,
        height:vH,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#fff',
        borderRadius:6,
    },
});

export default InputPasswordCommonDialog;
